<!--
 * @Description: 
 * @Version: 1.0.1
 * @Autor: hrlu.cn
 * @Date: 2022-06-27 21:44:06
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-13 22:40:46
-->
{% extends "base.html" %}

{% block cssextend %}
    <link href="/assets/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/assets/css/bootstrap-table-custom.css" rel="stylesheet">
{% endblock %}

{% block cssstyle %}
{% endblock %}

{% block content %}
     <!-- DATA TABLE-->
     <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="statistic-chart-1">
                        <!--h3 class="title-3 m-b-30">fresh</h3-->
                        
                        <table id="fresh-table" class="table table-hover">
                            <thead>
                                <tr>
                                    <th data-field="scode" data-sortable="true">股票代码</th>
                                    <th data-align="center" data-field="sname" data-sortable="true">股票名称</th>
                                    <th data-align="center" data-field="industry" data-sortable="true">所属行业</th>
                                    <th data-align="center" data-field="concepts" data-formatter="textOverFlowDisplay">所属概念</th>
                                    <!--th data-align="center" data-field="compute_date" data-sortable="true">计算日期</th-->
                                    <th data-align="center" data-field="close" data-sortable="true">收盘价</th>
                                    <th data-align="center" data-field="change" data-sortable="true">涨跌幅</th>
                                    
                                    <th data-align="center" data-field="duration_days" data-sortable="true">N日新高</th>
                                    <th data-align="center" data-field="duration_days" data-sortable="true" data-formatter="histHighDisplay">历史新高</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="" id="fresh-toolbar">
    </div>
{% endblock %}

{% block jsextend %}
    <script src="/assets/vendor/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script src="/assets/vendor/tableexport/tableExport.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/bootstrap-table-export.min.js"></script>
    <!--script src="/assets/vendor/jspdf/jspdf.min.js"></script>
    <script src="/assets/vendor/jspdf/jspdf.plugin.autotable.js"></script-->
    <script src="/assets/js/echarts.min.js"></script>
{% endblock %}

{% block jsscript %}
<script>
    var tableOption = {
        url: '/api/fresh_price_data',
        responseHandler: function (res, jqXHR) {
            for (var idx in res.rows) {
                var row = res.rows[idx];

                ['change'].forEach(function (field) {
                    row[field] = digitFormatter(row[field], 'percentage');
                });
                
                ['change'].forEach(function (field) {
                    row[field] = dyeingFormatter(row[field]);
                }); 

                // if (row.extreme) {
                //     row.duration_days = `<span class="text-danger">` + row.duration_days + `</span>`;
                // }
        
            }
            return res;
        },
        align: 'center',
        search: true,
        showRefresh: true,
        showColumns: true,
        iconSize: 'sm',

        classes: 'table',
        toolbar: '#fresh-toolbar',

        sortable: true,
        serverSort: true,

        pagination: true,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100, 1000],

        showExport: true,
        exportDataType: '',
        exportTypes: ['json', 'csv', 'txt', 'sql', 'excel'], //  'pdf', 'xml', 
    };

    $('#fresh-table').bootstrapTable(tableOption);
    $('#fresh-table').on('post-body.bs.table', function(e) {$("[data-toggle='popover']").popover();})

    searchInputPopover();

    function textOverFlowDisplay(value) {
        if (value.length < 16) {
            return value;
        }

        var subValue = value.substring(0, 16) + '...';
        var htmlValue = '';
        var concepts = value.split('/');
        for (var i = 0; i < concepts.length; i++ ) {
            htmlValue += (i + 1) + '. ' + concepts[i] + '<br>';
        }

        return `
        <span class="overflow-text">
            <a href="#" data-toggle="popover" data-html="true" data-title="Concepts" data-trigger="hover" data-content="` + htmlValue + `">
                ` + subValue + `
            </a>
        </span>
        `;
    } 

    function histHighDisplay(value, row) {
        var res = '突破';
        if (row.extreme) {
            res += 'M6、';
        }
        if (value > 720) {
            res += 'M5、';
        }
        if (value > 360) {
            res += 'M4、';
        }
        if (value > 180) {
            res += 'M3、';
        }
        if (value > 90) {
            res += 'M2、';
        }
        if (value > 1) {
            res += 'M1新高、';
        }
        return res + value + '日新高';
    }

</script>
{% endblock %}